<template>
  <div class="content">
    <div class="left">
      <p class="b_title">Pet<span style="color: red; margin: 0">.</span>care</p>
      <p class="title">Opening times</p>
      <p class="words">Monday-Staturday:10am-4pm</p>
      <p class="words">Sunday:Closed</p>
      <img :src="item" alt="" v-for="(item, index) in img" :key="index" />
    </div>
    <div class="right">
      <p class="title">Address</p>
      <ul class="Nav" v-for="(item, index) in List.Address" :key="index">
        <li class="words l_">{{ item }}</li>
      </ul>
    </div>
    <div class="right">
      <p class="title">Quick Links</p>
      <ul class="Nav" v-for="(item, index) in List.Quick_Links" :key="index">
        <li class="words l_">{{ item }}</li>
      </ul>
    </div>
    <div class="right">
      <p class="title">Here To Help</p>
      <ul class="Nav" v-for="(item, index) in List.Here_To_Help" :key="index">
        <li class="words l_">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: {
        Address: {
          1: "15-17 Oldgate",
          2: "Morpeth",
          3: "NE61 1QF",
          4: "+001(313)512 895",
          5: "info@petcare.co.uk",
        },
        Quick_Links: {
          1: "Cats",
          2: "Puppy",
          3: "Kitten",
          4: "Whole Prey",
          5: "Small Animal",
        },
        Here_To_Help: {
          1: "Abouts",
          2: "FAQ",
          3: "Blog",
          4: "Delivery",
          5: "Contact Us",
        },
      },
      img: {
        facebook: require("../../static/facebook-line.png"),
        ins: require("../../static/instagram.png"),
        twi: require("../../static/推特1.png"),
      },
    };
  },
};
</script>

<style scoped>
.content {
  width: 75%;
  margin: 100px auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.Nav {
  list-style: none;
}
.left img {
  background-color: #fff;
  border-radius: 100%;
  padding: 15px;
  width: 20px;
  height: 20px;
  margin-right: 20px;
}
.b_title {
  margin-top: 0;
  color: #000958;
  font-weight: bolder;
  font-size: 34px;
}
.title {
  margin-top: 0;
  color: #000958;
  font-weight: bolder;
  font-size: 20px;
}
.words {
  margin-left: 0;
  color: #585b7c;
}
.l_ {
  margin-left: -40px;
}
</style>
